<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Vendor JS Files -->
    <script th:src="@{vendor/purecounter/purecounter.js}"></script>
    <script th:src="@{vendor/aos/aos.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{vendor/glightbox/js/glightbox.min.js}"></script>
    <script th:src="@{vendor/isotope-layout/isotope.pkgd.min.js}"></script>
    <script th:src="@{vendor/swiper/swiper-bundle.min.js}"></script>
    <script th:src="@{vendor/php-email-form/validate.js}"></script>
    <script th:src="@{vendor/jq/jquery-3.4.1.js}"></script>
    <!-- Template Main JS File -->
<!--    <script th:src="@{js/main.js}"></script>-->
    <script th:inline="javascript">
        $(document).ready(function(){
            $("#product1").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("product1.html");
                window.location.hash="product1.html"
            })
            $("#product2").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("product2.html");
                window.location.hash="product2.html"
            })
            $("#product3").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("product3.html");
                window.location.hash="product3.html"
            })
            $("#product4").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("product4.html");
                window.location.hash="product4.html"
            })
        })
    </script>
    <style>
        .demoContainer{
            display: flex;
            background-color: #f3f5f6;
            flex-direction: column;
            align-items: center;
        }
        .demoContainer h1{
            font-size: 35px;
            font-weight: bold;
            text-transform: uppercase;
            position: relative;
            color: #3a3939;
            border-bottom-style: solid;
            border-bottom-color: #5ea8f1;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom-width: 5px;
        }
        .box{
            /*margin-top: 20px;*/
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: center;
        }
        .box-item{
            display: flex;
            flex-direction: row;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            background-color: #fff;
            width: 70%;
            height: 400px;
            /*align-items: center;//控制交叉轴对齐*/
            margin: 15px;//item之间相距距离
        }
        .box-item:hover h2{
            color: #297df6;
            transition: 0.3s;
        }
        .box-item img{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            margin: 50px;
            width: 35%;
        }
        .text{
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .text ul li{
            margin-top: 15px;
            color: #666;
            font-size: 15px;
        }
    </style>
</head>
<body>
<div class="demoContainer">
    <h1>产品与服务</h1>
    <div class="box">
        <div id="product1" class="box-item">
            <img th:src="@{img/solutions/MES_3.jpg}"  width="300px" height="300px" alt="...">
            <div class="text">
                <h2>电池生产制造执行系统XMES</h2>
                <ul>
                    <li>MES是制造业务的关键工具，能够解决生产计划排程、生产过程监控、质量管理、物料追溯等问题</li>
                    <li>实现生产过程的数字化管理和实时监控</li>
                    <li>提高生产效率、减少生产成本，确保产品质量</li>
                    <li>加强生产过程的可追溯性，实现精益生产和智能制造</li>
                    <li>车间智能看板信息展示</li>
                </ul>
            </div>
        </div>
        <div class="box-item" id="product2">
            <img th:src="@{img/solutions/电池pack.jpg}"  width="300px" height="300px" alt="...">
            <div class="text">
                <h2>PACK线生产制造系统PMES</h2>
                <ul>
                    <li>实现单体锂电池电芯的串并联组成可应用于各个领域的电池模组</li>
                    <li>通过数据采集、数据分析实现数据融合和数据可溯源</li>
                    <li>生产过程的数字化管理和实时监控</li>
                    <li>加强生产过程的可追溯性，实现精益生产和智能制造</li>
                    <li>可视化管理让数据：通过生产数据信息的直接传递，对从订单下达到产品完成的整个生产过程进行优化运营管理。</li>
                    <li>实现全厂生产信息与排产可视化，是企业实现生产智能化、即时化的重要手段。</li>
                </ul>
            </div>
        </div>
        <div class="box-item" id="product3">
            <img th:src="@{img/solutions/电池生产.jpg}"  width="300px" height="300px" alt="...">
            <div class="text">
                <h2>电池生产智能控制平台系统线CMES</h2>
                <ul>
                    <li>实现电芯成型注液到电芯成品的后半段流程生产控制</li>
                    <li>通过数据采集、数据分析实现数据融合和数据可溯源</li>
                    <li>生产过程的数字化管理和实时监控</li>
                    <li>加强生产过程的可追溯性，实现精益生产和智能制造</li>
                    <li>可视化管理让数据：通过生产数据信息的直接传递，对从订单下达到产品完成的整个生产过程进行优化运营管理。</li>
                    <li>实现全厂生产信息与排产可视化，是企业实现生产智能化、即时化的重要手段。</li>
                </ul>
            </div>
        </div>
        <div class="box-item" id="product4">
            <img th:src="@{img/solutions/能源储备.jpg}"  width="300px" height="300px" alt="...">
            <div class="text">
                <h2>工厂能量管理系统XEMS</h2>
                <ul>
                    <li>工厂能源平台智能控制</li>
                    <li>工厂设备、工作车间、工艺工步资源信息管理</li>
                    <li>工厂电网功率实时数据采集</li>
                    <li>能耗生成可视化曲线图表，预测设备功耗上下限</li>
                    <li>设备通道控制，电池充放电管理。工厂能量负载回馈优化</li>
                </ul>
            </div>
        </div>
        <div class="box-item">
            <img th:src="@{img/solutions/工控软件设计.jpg}"  width="300px" height="300px" alt="...">
            <div class="text">
                <h2>工业自动化工控软件设计</h2>
                <ul>
                    <li>实现电芯成型注液到电芯成品的后半段流程生产控制</li>
                    <li>通过数据采集、数据分析实现数据融合和数据可溯源</li>
                    <li>生产过程的数字化管理和实时监控</li>
                    <li>加强生产过程的可追溯性，实现精益生产和智能制造</li>
                    <li>可视化管理让数据：通过生产数据信息的直接传递，对从订单下达到产品完成的整个生产过程进行优化运营管理。</li>
                    <li>实现全厂生产信息与排产可视化，是企业实现生产智能化、即时化的重要手段。</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>